import React, { Component } from 'react'
import { NavBar } from 'antd-mobile'
import "./Cate.less"
import { SearchBar } from 'antd-mobile';
import axios from "axios"
import { reqGetcate, reqGetgoods, reqGetgoodsinfo } from '../../http/api';

export default class Cate extends Component {
    constructor() {
        super()
        // 1设置初始值
        this.state = {
            cateList: [],
            goodsList: [],
            n: 0,
        }
    }
    // 2清数据
    async componentDidMount() {

        
        let res = await reqGetcate()
        console.log(res);
        this.setState({
            cateList: res.data.list
        })



        let res2 = await reqGetgoods()
        this.setState({
            goodsList: res2.data.list
        })
    }
    one(id, index) {
        reqGetgoods({ fid: id }).then(res => {
            if (res.data.code == 200) {
                console.log(res);
                this.setState({
                    goodsList: res.data.list ? res.data.list : [],
                    n: index
                })
            }
        })
    }
    render() {
        let { cateList, goodsList, n } = this.state
        return (
            <div className="home">
                <NavBar>分类</NavBar>
                <SearchBar placeholder="Search" maxLength={8} onSubmit={() => this.props.history.push("/search")} />
                <div className="box">




                    <div className="left">
                        {/* 3渲染页面 */}
                        {
                            cateList.map((item, index) => (
                                <div className="leftcon">
                                    <div onClick={() => this.one(item.id, index)} className={index === n ? "active" : ""} key={item.id}>{item.catename}</div></div>
                            ))
                        }
                    </div>




                    <div className="right">
                        <h3>热门精选</h3>
                        {
                            goodsList.map((item) => (
                                <div className="leftcon" key={item.id} onClick={() => this.props.history.push('/detail/' + item.id)}>
                                    <img src={item.img} alt="" />
                                    {item.goodsname}</div>
                            ))
                        }
                    </div>
                </div>
            </div>
        )
    }
}
